<template>
  <div>
	  <div>
		  <el-dialog title="修改排班医生" :visible.sync="dialogScheduleVisible">
		    <el-form :model="form">
		      <el-form-item label="选择医生" :label-width="formLabelWidth">
		        <el-select v-model="form.dId" filterable placeholder="请选择医生">
		          <el-option 
				  v-for="item in doctorOptions"
				  :key="item.id"
				  :label="item.name+'	(已排'+item.num+'班)'" 
				  :value="item.id"
				  ></el-option>
		        </el-select>
		      </el-form-item>
		    </el-form>
		    <div slot="footer" class="dialog-footer">
		      <el-button @click="dialogScheduleVisible = false,form = {dId:'',sIds:''}">取 消</el-button>
		      <el-button type="primary" @click="handleEdit">确 定</el-button>
		    </div>
		  </el-dialog>
	  </div>
    <el-table
		ref="scheduleTable"
		:data="tableData"
		style="width: 100%"
		@selection-change="handleSelectionChange">
		<el-table-column
			type="selection"
			width="55"
			align="center">
		</el-table-column>
		<el-table-column type="expand">
			<template slot-scope="props">
				<!-- 根据改行记录是否有doctor对象进行判断，有则显示医生详情 -->
				<el-form v-if="!props.row.doctors[0]" label-position="left" inline class="table-expand">
					<el-empty :image-size="80" description="尚未排班"></el-empty>
				</el-form>
				<el-form v-if="props.row.doctors[0]" label-position="left" inline class="table-expand">
					<el-form-item label="医生姓名">
						<span>{{ props.row.doctors[0]? props.row.doctors[0].name : "尚未排班" }}</span>
					</el-form-item>
					<el-form-item label="性别">
						<span>{{ props.row.doctors[0]? props.row.doctors[0].gender : "" }}</span>
					</el-form-item>
					<el-form-item label="生日">
						<span>{{ props.row.doctors[0]? props.row.doctors[0].birth : "" }}</span>
					</el-form-item>
					<el-form-item label="联系电话">
						<span>{{ props.row.doctors[0]? props.row.doctors[0].phone : "" }}</span>
					</el-form-item>
					<el-form-item label="入职时间">
						<span>{{ props.row.doctors[0]? props.row.doctors[0].hiredate : "" }}</span>
					</el-form-item>
					<el-form-item label="科室主任">
						<span>{{ props.row.doctors[0]? (props.row.doctors[0].isDirector === true? "是" : "否") : "" }}</span>
					</el-form-item>
				</el-form>
			</template>
		</el-table-column>
      <el-table-column 
	  label="科室" 
	  prop="deptId"
	  :filters="deptFilters"
	  :filter-method="filterDeptId"
	  :formatter="deptIdFormatter"
	  > </el-table-column>
      <el-table-column 
	  label="星期" 
	  prop="week" 
	  sortable 
	  :filters="[{text: '周一', value: 1},{text: '周二', value: 2},{text: '周三', value: 3},{text: '周四', value: 4},{text: '周五', value: 5},{text: '周六', value: 6},{text: '周日', value: 7}]" 
	  :filter-method="filterWeek"
	  :formatter="weekFormatter"
	  > </el-table-column>
      <el-table-column 
	  label="班期" 
	  prop="shift"
	  :formatter="shiftFormatter"> </el-table-column>
      <el-table-column 
	  label="医生姓名"
	  :filters="[{text: '尚未安排医生的班次', value: 0}, {text: '已经安排医生的班次', value: 1}]"
	  :filter-method="filterEmptySchedule"
	  >
		  <template slot-scope="scope">{{ scope.row.doctors[0]? scope.row.doctors[0].name : "尚未排班" }}</template>
	  </el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="searchCache" size="mini" placeholder="输入医生姓名搜索" @keyup.enter.native="handleSearchByName">
			<el-button type="primary" slot="append"  @click="handleSearchByName">搜索</el-button>
		  </el-input>
			<el-button size="mini" plain type="primary" @click="clearFilter">清除所有过滤器</el-button>
			<el-button size="mini" plain type="danger" @click="handleMultipleSchedule()">批量修改排班医生</el-button>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
			plain
            @click="handleSingleSchedule(scope.row)"
            >修改排班医生</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br /><br />
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[8, 56]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  //初始化数据
  created() {
	this.loadDeptFilters();
    this.loadSchedule();
  },
  data() {
    return {
	  searchCache: "",
      search: "",
	  deptFilters: [],
      tableData: [],
	  multipleSelection: [],
	  doctorOptions: [],
	  dialogScheduleVisible: false,
	  form: {
	            dId: '',
				sIds: ''
	          },
	  formLabelWidth: '120px',
      currentPage: 1,
      page: 8,
      pageInfo: {},
    };
  },
  methods: {
	// 处理更改多选框
	handleSelectionChange(val) {
		this.multipleSelection = val;
	},
	// 清除过滤器
	clearFilter() {
		this.$refs.scheduleTable.clearFilter();
	},
	// 科室过滤器
	filterDeptId(value, row) {
		return row.deptId === value;
	},
	// 星期过滤器
	filterWeek(value, row) {
		return row.week === value;
	},
	// 空排班过滤器
	filterEmptySchedule(value, row) {
		return row.doctors.length === value;
	},
	// 科室格式化
	deptIdFormatter(row, column) {
		var depts = this.deptFilters;
		for(var i in depts) {
			if(row.deptId === depts[i].value) {
				return depts[i].text;
			}
		}
	},
	// 星期格式化
	weekFormatter(row, column) {
		if(row.week === 1) {
			return "周一";
		} else if(row.week === 2) {
			return "周二";
		} else if(row.week === 3) {
			return "周三";
		} else if(row.week === 4) {
			return "周四";
		} else if(row.week === 5) {
			return "周五";
		} else if(row.week === 6) {
			return "周六";
		} else {
			return "周日";
		}
	},
	// 班期格式化
	shiftFormatter(row, column) {
		if(row.shift === "1") {
			return "8:00-9:00";
		} else if(row.shift === "2") {
			return "9:00-10:00";
		} else if(row.shift === "3") {
			return "10:00-11:00";
		} else if(row.shift === "4") {
			return "11:00-12:00";
		} else if(row.shift === "5") {
			return "13:00-14:00";
		} else if(row.shift === "6") {
			return "14:00-15:00";
		} else if(row.shift === "7") {
			return "15:00-16:00";
		} else {
			return "16:00-17:00";
		}
	},
	
	// 加载科室过滤器
	loadDeptFilters() {
		this.$axios
		  .get(
		    "http://localhost:8080/outpatientSchedule/findAllDeptFilter"
		  )
		  .then((src) => {
		    this.deptFilters = src.data.data;
		  });
	},
	// 加载排班表
	loadSchedule() {
		this.$axios
		  .get(
		    "http://localhost:8080/outpatientSchedule/" +
		      this.currentPage +
		      "/" +
		      this.page
		  )
		  .then((src) => {
		    this.tableData = src.data.data.list;
		    this.pageInfo = src.data.data;
		  });
	},
	// 搜索排班表
	loadScheduleByName() {
		this.$axios
		  .get(
			"http://localhost:8080/outpatientSchedule/" +
			  this.search +
			  "/" +
			  this.currentPage +
			  "/" +
			  this.page
		  )
		  .then((src) => {
			this.tableData = src.data.data.list;
			this.pageInfo = src.data.data;
		});
	},
	// 加载医生表
	loadDoctor() {
		this.$axios
		  .get(
		    "http://localhost:8080/outpatientSchedule"
		  )
		  .then((src) => {
		    this.doctorOptions = src.data.data;
		  });
	},
	// 判断搜索框是否为空
	judgeSearchBox() {
	    if (this.search === "") {
			this.loadSchedule();
		} else {
			this.loadScheduleByName();
		}
	},
	// 处理按医生名称搜索
	handleSearchByName() {
		this.search = this.searchCache;
		this.judgeSearchBox();
	},
	// 处理更改每页条数
	handleSizeChange(val) {
		this.page = val;
		this.judgeSearchBox();
    },
	// 处理更改当前页数
    handleCurrentChange(val) {
		this.currentPage = val;
		this.judgeSearchBox();
    },
	// 处理修改单个请求
	handleSingleSchedule(row) {
		this.loadDoctor();
		this.dialogScheduleVisible = true;
		this.form.sIds = row.id;
	},
	// 处理修改多个请求
	handleMultipleSchedule() {
		var rows = this.multipleSelection;
		
		// 非空校验
		if(rows.length === 0) {
			this.$message.error("请选择需要修改的排班");
			return;
		}
		
		// 将选中排班id拼接为字符串存入表单
		var str = '';
		for(var i in rows) {
			if(i != rows.length-1) {
				str += rows[i].id +",";
			} else {
				str += rows[i].id;
			}
		}
		
		this.loadDoctor();
		this.dialogScheduleVisible = true;
		this.form.sIds = str;
	},
	// 处理单个或批量修改排班
    handleEdit() {
		this.dialogScheduleVisible = false;
		this.$axios
		  .put(
		    "http://localhost:8080/outpatientSchedule/" +
		    this.form.dId +
			"/" +
			this.form.sIds
		  )
		  .then((src) => {
		    if (src.data.code === 200) {
		      this.$message({ message: src.data.msg, type: "success" });
			  this.form = {dId:'',sIds:''};
			  this.loadSchedule();
		    } else {
		      this.$message.error(src.data.msg);
		    }
		});
    },
  },
};
</script>

<style lang="less" scoped>
.show {
  margin: 20px;
}
.header {
  display: flex;
  button {
    margin-left: 20px;
  }
}
.wrapper {
  margin: 20px;
}
.table-expand {
    font-size: 0;
  }
  .table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
